<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="98%">
			<el-table :data="state.tableData.data" height="700" v-loading="state.tableData.loading" :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName" style="width: 100%">
				<el-table-column label="原始接口" align="center">
					<el-table-column prop="oriFieldEnName" width="200" label="英文名称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="oriFieldCnName" label="中文名称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="oriFieldDataType" width="120" label="数据类型" show-overflow-tooltip></el-table-column>
					<el-table-column prop="oriFieldLength" width="80" label="长度" show-overflow-tooltip></el-table-column>
					<el-table-column prop="oriFieldRequired" width="100" label="是否必输" show-overflow-tooltip></el-table-column>
					<el-table-column prop="oriFieldRemarks" label="备注" show-overflow-tooltip></el-table-column>
				</el-table-column>
				<el-table-column label="" align="center" width="10"></el-table-column>
				<el-table-column label="QZBSD" align="center">
					<el-table-column prop="bsdFieldEnName" width="200" label="英文名称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="bsdFieldCnName" label="中文名称" show-overflow-tooltip></el-table-column>
					<el-table-column prop="bsdFieldDataInfo" width="200" label="数据类型（长度）" show-overflow-tooltip></el-table-column>
					<el-table-column prop="bsdFieldConstraints" width="120"  label="约束条件" show-overflow-tooltip></el-table-column>
					<el-table-column prop="bsdFieldRequired" width="100" label="是否必输" show-overflow-tooltip></el-table-column>
					<el-table-column prop="bsdFieldRemarks" label="备注" show-overflow-tooltip></el-table-column>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref } from 'vue';
import { msgHeaderApi } from './api';
import { ElMessage } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 引入 api 请求接口
const api = msgHeaderApi();

// 定义变量内容
const state = reactive({
	tableData: {
		data: [],
		loading: false,
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
	if (row.bsdFieldDataInfo === "ARRAY") {
		return 'blueBackgroundColor'
	}
	if (row.oriFieldEnName === "输入" || row.oriFieldEnName === "输出") {
		return 'redBackgroundColor'
	}
	if (row.fieldType === "req") {
		return 'yellowBackgroundColor'
	}
	if (row.fieldType === "rsp") {
		return 'greenBackgroundColor'
	}
	
}

const tableCellClassName = ({
   row, column, rowIndex, columnIndex
}: {
  row: any
  column: any
  rowIndex: number
  columnIndex: number
}) => {
  if (columnIndex === 6) {
    return 'brownBackgroundColor'
  } 
  return ''
}

// 打开弹窗
const openDialog = async (row: any) => {
	state.dialog.isShowDialog = true;
	state.tableData.loading = true;
	try {
		const res = await api.getMsgHeaderField({'id':row.id});
		state.tableData.data = res.data;
	} catch (error:any) {
		ElMessage.warning(error.message);
	}
	state.tableData.loading = false;
};
// 关闭弹窗
const closeDialog = () => {

};
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style>
.brownBackgroundColor {
  background-color: brown;
}
.el-table .greenBackgroundColor {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-table .yellowBackgroundColor {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .blueBackgroundColor {
  --el-table-tr-bg-color: var(--el-color-primary-light-9);
}
.el-table .redBackgroundColor {
  --el-table-tr-bg-color: var(--el-color-danger-light-9);
}
</style>
